﻿<!DOCTYPE html>
<html lang="en">
<head>
<title>五子棋登录</title>
<!-- custom-theme -->
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no,maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />


<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //custom-theme -->
<!-- Google fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext" rel="stylesheet">
<!-- Google fonts -->

<!-- css files -->
<link href="css/style1.css" type="text/css" rel="stylesheet" media="all">   
<!-- //css files -->

<link rel="stylesheet" href="css/font-awesome.css"> <!-- Font-Awesome-Icons-CSS -->

<link href="css/popup-box.css" rel="stylesheet" type="text/css" media="all" /> <!-- popup box css -->

</head>
<!-- body starts -->
<body>

<!-- section -->
<section class="register">
	<div class="header">
		<div class="logo">
			<a href="#">GoBang</a>
		</div>
	<div class="social">
			<!-- <li><a href="#"><span class="fa fa-facebook"></span></a></li>
			<li><a href="#"><span class="fa fa-twitter"></span></a></li>
			<li><a href="#"><span class="fa fa-linkedin"></span></a></li>
			<li><a href="#"><span class="fa fa-google-plus"></span></a></li> -->
	</div>
		<div class="clear"></div>
	</div>
	<div class="register-full">
		<div class="register-left">
			<div class="register">
				<p>Let's play the game</p>
				<h1>BY GoBang</h1>
				<h2>Pursue the ultimate in experience</h2>
				<p>This is my second ssm project, based on springboot and mybatis is implemented, contains Online matches, player matchmaking, player points display and other common features</p>
				<div class="content3">
					<ul>
						<li><a class="" href="#" id="tourInfo"> Tourist status</a></li>
						<li><a class="read" href="#" id="userInfo"> User identity</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="register-right" style="text-align: center;">
			<div class="register-in">
				<a class="book popup-with-zoom-anim button-isi zoomIn animated" data-wow-delay=".5s" href="#small-dialog2">注 册 »</a>
			</div>
			<div class="register-in middle">
				<a class="book popup-with-zoom-anim button-isi zoomIn animated" data-wow-delay=".5s" href="#small-dialog">登 录 »</a>
			</div>
			<div class="register-in">
				<a href="https://blog.csdn.net/baiyang2001/article/details/125936231?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125936231%22%2C%22source%22%3A%22baiyang2001%22%7D&ctrtid=7kAqu">项目解析 (CSDN) »</a>
			</div>
			<div class="clear"> </div>
		</div>
	<div class="clear"> </div>
	</div>
	<!-- copyright -->
	<!-- //copyright -->
</section>
<!-- //section -->



<!-- login form popup-->
<div class="pop-up"> 
	<div id="small-dialog" class="mfp-hide book-form">

		<div class="login-form login-form-left"> 
			<div class="agile-row">
				<h3>Login to your site</h3>
				<!-- <span class="fa fa-lock"></span> -->
				<div class="clear"></div>
				<div class="login-agileits-top"> 	
						<input type="text" class="name" name="username" id="user" Placeholder="Username" required=""/>
						<input type="password" class="password" name="password" id="password" Placeholder="Password" required=""/>
						<input type="submit" value="Login" id="submit"> 
				</div> 
				<div class="login-agileits-bottom"> 
					<!-- <h6><a href="modif.html">Forgot password?</a></h6> -->
				</div> 
			</div>  
		</div> 
		
	</div>  
</div>
<!-- //login form popup-->

<!-- subscribe form popup -->
<div class="pop-up"> 
	<div id="small-dialog1" class="mfp-hide book-form">

		<div class="login-form login-form-left"> 
			<div class="agile-row">
				<h3>Be the first to hear</h3>
				<p>Sign up to get notified about latest offers, news and events. Stay tuned!</p>
				<div class="clear"></div>
				<div class="login-agileits-top"> 	
					<form action="#" method="post"> 
						<input type="text" class="name" name="name" Placeholder="Full Name" required=""/>
						<input type="email" class="email" name="email" Placeholder="Email" required=""/>
						<input type="submit" value="Get Notified" > 
					</form> 	
				</div>
			</div>  
		</div> 
		
	</div>  
</div>
<!-- //subscribe form popup-->

<!-- register form popup-->
<div class="pop-up"> 
	<div id="small-dialog2" class="mfp-hide book-form">
	
		<div class="login-form login-form-left"> 
			<div class="agile-row">
				<h3>Register form</h3>
				<div class="login-agileits-top"> 	
					
						<input type="text" id="newUsername" class="name" name="username" Placeholder="username" required=""/>
						<!-- <input type="email" class="email" name="email" Placeholder="Email" required=""/> -->
						<input type="password" id="newPassword" class="password" name="password" Placeholder="Password" required=""/>
						<input type="password" class="phone" name="phone" Placeholder="Confirm the password" required=""/ id="repassword">
						<div class="login-check">
							<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i> I Accept to the <a href="#">Terms &amp; Conditions</a></label>
						</div>
						<input type="submit" value="Register" id="rsb"> 
					 	
				</div>
			</div>
		</div>
		
	</div>
</div>
<!-- //register form popup-->

<!-- js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- //js -->

<!--popup-js-->
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
 <script>
	$(document).ready(function() {
	$('.popup-with-zoom-anim').magnificPopup({
		type: 'inline',
		fixedContentPos: false,
		fixedBgPos: true,
		overflowY: 'auto',
		closeBtnInside: true,
		preloader: false,
		midClick: true,
		removalDelay: 300,
		mainClass: 'my-mfp-zoom-in'
	});
																	
	});
</script>
<!--//popup-js-->
<script>
	$(function(){
		$("#submit").click(function(){
			var username=$("#user").val();
			var password=$("#password").val();
			if(username == "" || password == ""){
				alert("用户名或密码为空");
				return;
			}
			$.ajax({
				url:"/login",//指定路径
				data:{"username":username,"password":password},
				type:"POST",
				dataType:"json",//服务器返回数据为json
				success:function (data) {
					console.log(data);
					if(data.status==0){
						alert("登录成功！");
						window.location.href="/index.html";
					}else{
						alert("用户名密码错误");
						$("#user").val("");
						$("#password").val("");
					}
				}
			})
		})
	})

	$(function(){
		$("#rsb").click(function(){
			var username = $("#newUsername").val();
			var password = $("#newPassword").val();
			var repassword = $("#repassword").val();
			var lenp = password.length;

			if(password != repassword){
				alert("两次输入的密码不一致");
				$("#newPassword").val("");
				$("#repassword").val("");
				return;
			}

			if(lenp < 6){
				alert("密码长度小于6位不安全，请设置大于6位的密码");
				$("#newPassword").val("");
				$("#repassword").val("");
				return;
			}
				
			
				$.ajax({
				url:"/register",
				type:"post",
				data:{"username":username,"password":password},
				dataType:"json",

				success:function(val){
					console.log(val);
					if(val.status == 0){
						alert("注册成功,请进行登录");
						window.location.href="gblogin.html";
					}else{
						alert("注册失败");
						$("#newUsername").val("");
						$("#newPassword").val("");
						$("#repassword").val("");
						return;
					}
				}
			});
		})
	})

	$(function(){
		$("#tourInfo").click(function(){
			alert("当前为游客身份，请使用 ——> 账号：bit / 密码：123456进行登录");
		});
	})

	$(function(){
		$("#userInfo").click(function(){
			alert("当前为用户身份，请使用已有账号登录或注册后登录");
		});
	})
</script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>

</body>	
<!-- //body ends -->
</html>